[Androidアプリ開発] ちょっとなめらかな線でお絵かきしてみる

そーとー間が空いてしまいましたが、前回の [Androidアプリ開発] タッチでお絵かきしてみた(undo付) の続きです。カクカクになってしまう線を少しだけなめらかにしてみます。

ちょっとだけなめらかな線に変更

iOS版ではすでに同じようなことをやっていて、それをAndroidでやってみた感じですね。ちなみにiOS版のブログはこちら。 [iOSアプリ開発] ちょっとなめらかな線でお絵かきしてみる

まず、フィールドに必要な変数を追加します。

DrawSurfaceView.java

public class DrawSurfaceView extends SurfaceView implements Callback {

	private SurfaceHolder mHolder;
	private Paint mPaint;
	private Path mPath;
	private Bitmap mLastDrawBitmap;
	private Canvas mLastDrawCanvas;
	private Deque<Path> mUndoStack = new ArrayDeque<Path>();
	private Deque<Path> mRedoStack = new ArrayDeque<Path>();
	private float mLastTouchX;
	private float mLastTouchY;
	private boolean mFirstMovedFlg;

	public DrawSurfaceView(Context context) {
		super(context);
		init();
	}

次にタッチ系の処理を修正します。

DrawSurfaceView.java

	private void onTouchDown(float x, float y) {
		mPath = new Path();
		mPath.moveTo(x, y);
		mLastTouchX = x;
		mLastTouchY = y;
		mFirstMovedFlg = false;
	}

	private void onTouchMove(float x, float y) {
		// mPath.lineTo(x, y);
		if (!mFirstMovedFlg) {
			mFirstMovedFlg = true;
			mLastTouchX = x;
			mLastTouchY = y;
			return;
		}
		float middlePointX = (mLastTouchX + x) / 2;
		float middlePointY = (mLastTouchY + y) / 2;
		mPath.quadTo(mLastTouchX, mLastTouchY, middlePointX, middlePointY);
		drawLine(mPath);
		mLastTouchX = x;
		mLastTouchY = y;
	}

	private void onTouchUp(float x, float y) {
		// mPath.lineTo(x, y);
		mPath.quadTo(mLastTouchX, mLastTouchY, x, y);
		drawLine(mPath);
		mLastDrawCanvas.drawPath(mPath, mPaint);
		mUndoStack.addLast(mPath);
		mRedoStack.clear();
	}

はい、これで完成です。iOS版でやったのとほぼ同じ考え方で、タッチした座標の中点を曲線でつないでいくという簡単な方法です。
動作確認は割愛しますが、時間のある方は実際に試してみてもらえたらと思います。。

ではでは。